// 
const element = <div>This is JSX</div>

// 1.0 
const myName = 'chenwei';
const element = <h1>Hello, { myName }</h1>;

ReactDom.render(
  element,
  document.getElementById('root')
);

// 2.0 
function getUserName(user) {
  return user.firstName + user.lastName;
};
const yg_cw = {
  firstName: 'cw',
  lastName: 'xd'
};
const element = (  // 将内容放到括号中，避免出现自动分号
  <h1>
    hello, { getUserName(yg_cw) }!
  </h1>
);
ReactDom.render(
  element,
  document.getElementById('root')
);

// 3.0 JSX是一个表达式
function getGreeting(user) {
  if(user) {
    return <h1>hello, { getUserName(user) }</h1>
  }else {
    return <h2>hello, stronger!</h2>
  }
}

// 4.0 特定属性
const user = {
  firstName: 'cw',
  lastName: 'xd',
  avatarUrl: 'www.bing.com'
};
const element = <div tabIndex='0'></div>;
const element = <img src={user.firstName} />; // jsx使用小驼峰命名属性，如class转变为className、tabindex转变为tabIndex 

// 5.0 指定子元素
const element = <img src={ user.avatarUrl } />
const element = (  // jsx中能包含众多标签
  <div>
    <h1>111</h1>
    <span>222</span>
  </div>
)

// 6.0 安全
const title = response.potentiallyMaliciousInput;
const element = <h1> { title } </h1>  // 可以直接使用，不用担心注入安全问题，jsx不会转译非编写内容

// 7.0 React创建元素的过程
const element = (
    <h1 className='fighting'>hello,This is JSX</h1>
);
const element = React.createElement(  // 上面本质上是调用这个方法创建元素
  'h1',
  { className: 'fighting'},
  'hello,This is JSX'
);
const element = {  // 最终会创建这样的一个对象（简化后的结构），被称为' React元素 '
  type: 'h1',
  props: {
    className: 'fighting',
    children: 'hello,This is JSX'
  }
}